<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="head::common_header">
</head>
<style>



    /*用户评价样式*/
    ul#user_evaluate li{
        border-top: 2px dashed #eee;
        padding: 30px 0;
        list-style:none
    }
    li.evaluate_li span{
        display: inline-block;
        vertical-align: top;
    }
    li.evaluate_li span.img img{
        width: 50px;
        height:50px;
        border-radius: 50%;
        margin-right:30px
    }
    li.evaluate_li span.info{
        width: 675px;
        display: inline-block;
        vertical-align: top;
    }
    li.evaluate_li span.info h4{
        font-size: 12px;
        color: #999;
    }
    li.evaluate_li span.info p.time{
        font-size: 12px;
        color: #999;
    }
    li.evaluate_li span.info div.reply_info{
        margin-top: 15px;
        padding: 15px;
        background: #f8f8f8;
        font-size: 12px;
        color: #999;
    }
    /*分页点击操作*/
    div.switch-tag-wrap {
        text-align:right;
    }
    div.js-switch{
        color: #999;
        display: inline-block;
        font-size: 14px;
        width: 60px;
        text-align: center;
        cursor: pointer;
        margin-right: 20px;
    }
    div.js-switch:hover{
        color:#ffa500;
    }
    div.switch-tag-wrap div.fr{
        float:right;
    }
    /*评价选择*/
    p.switch-head-line span.mr{
        cursor: pointer;
        margin-right: 60px;
    }
    .chooseActive{
        color: #ffa500;
    }


    :root {
        --arrow-bg: rgba(255, 255, 255, 0.3);
        --option-bg: white;
        --select-bg: rgba(255, 255, 255, 0.2);
    }

    /* <select> styles */
    select {
        box-sizing: border-box;
        /* Reset */
        appearance: none;
        border: 0;
        outline: 0;
        font: inherit;
        /* Personalize */
        width: 20rem;
        padding: 1rem 4rem 1rem 1rem;
        background: no-repeat right 0.8em center / 1.4em,
        linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
        border-radius: 0.25em;
        box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
        cursor: pointer;
        /* Remove IE arrow */

        &::-ms-expand {
            display: none;
        }

        /* Remove focus outline */

        &:focus {
            outline: none;
        }

        /* <option> colors */

        option {
            color: inherit;
        }


    }

    .generate-button:hover {
        background-color: #ffa500;;
        color: white;

    }

    .generate-button {
        width: 20rem;
        display: inline-block;
        text-align: center;
        color: #ffa500;
        font-weight: bold;
        background: rgba(255, 165, 0, .2);
        height: 3rem;
        line-height: 3rem;;
        font-size: 2rem;
    }


    .article-card {
        border-radius: .25rem;
        -webkit-box-shadow: 0 0 0.25rem 0 rgba(35, 55, 75, .4);
        box-shadow: 0 0 0.25rem 0 rgba(35, 55, 75, .4);
        margin-bottom: 1rem;
    }
    .article-card-cover {
        background-color: #f6f6f6;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        min-height: 115px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .article-card-body {
        padding: .5rem 1rem;
    }

    .article-card-title {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
    }

    .article-project-time {
        -ms-flex-item-align: stretch;
        align-self: stretch;
        padding: .25rem 0 0;
        font-weight: 400;
        font-size: .875rem;
        color: #848484;
    }



</style>

<body>
<div th:replace="header :: header"></div>
<!-- 首页视频banner区 -->

<!-- 预订部分 -->


<!-- 套餐部分 -->


<!-- 服务部分 -->
<section class="services" id="services">

    <h1 class="heading">
        <span>g</span>
        <span>u</span>
        <span>i</span>
        <span>d</span>
        <span>e</span>
    </h1>

    <div class="box-container">

        <div style="flex: 1;height: 500px;">
            <div style="width: 100%;margin-top: 20px;">
                <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 1rem">Select destination
                </div>
                <div style="display: flex;justify-content: center;">
                    <select id="destination">
                        <option th:each="item:${list}" th:text="${item.name}" th:value="${item.id}">Yellow Crane Tower</option>
                    </select>
                </div>

            </div>

            <div style="width: 100%;margin-top: 20px;">
                <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 1rem">Choose your favorite
                    food
                </div>
                <div style="display: flex;justify-content: center;">
                    <select id="food">
                        <option selected value="0">Hot noodles with sesame pastes...</option>
                        <option value="1">Spicy crayfish</option>
                        <option value="2">Spareribs and lotus root soup</option>
                    </select>
                </div>

            </div>

            <div style="width: 100%;margin-top: 20px;">
                <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 1rem">Choose transport
                </div>
                <div style="display: flex;justify-content: center;">
                    <select id="transport">
                        <option selected value="0">Subway</option>
                        <option value="1">Taxi</option>
                        <option value="2">Bus</option>
                    </select>
                </div>
            </div>

            <div style="width: 100%;margin-top: 20px;display: flex;justify-content: center;">
                <div class="generate-button" id="generate-button">generate
                </div>
            </div>
        </div>

        <div style="flex: 1;">

            <div class="row justify-content-center mt-3">
                <div class="col-12 col-md-8 col-lg-7">
                    <div class="article-card">
                        <div class="article-card-content">
                            <div style="height:300px; background-image:url('/img/Hippopx3.jpg');background-size:cover; background-position: center center;background-repeat:no-repeat;"
                                 class="article-card-cover" id="destinationBg">
                            </div>
                            <div class="article-card-body">
                                <div class="article-card-title">
                                    <h5>Destination</h5>
                                    <div class="article-project-time ml-3 text-right" id="destinationText">
                                        destination..
                                    </div>
                                </div>
                                <div class="article-card-title">
                                    <h5>Description</h5>
                                    <div class="article-project-time ml-3 text-right" id="descriptionText">
                                        desc.....
                                    </div>

                                </div>

                                <div class="article-card-title">
                                    <h5>Opening hours</h5>
                                    <div class="article-project-time ml-3 text-right" id="openingHour">
                                        Opening hours
                                    </div>
                                </div>

                                <div class="article-card-title">
                                    <h5>public transport</h5>
                                    <div class="article-project-time ml-3 text-right" id="publicTransport">
                                        103,102,
                                    </div>
                                </div>

                                <div class="article-card-title">

                                    <h5>Favorite Food</h5>

                                    <div class="article-project-time ml-3 text-right" id="foodText">
                                        east ...

                                    </div>

                                </div>
                                <div class="article-card-title">

                                    <h5>Transport</h5>

                                    <div class="article-project-time ml-3 text-right" id="transportText">
                                        east ...

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="col-12 col-md-4 col-lg-3"></div>
            </div>
            <div  id="evalute-right">
                <!-- 评价选择 -->
                <p class="switch-head-line">
                    <label style="width: 80px;color: #999;">sort：</label>
                    <span class="mr chooseActive" eval_data='1' onclick="chooseEval(this)">Good(6)</span>
                    <span class="mr" eval_data='2' onclick="chooseEval(this)">Average(0)</span>
                    <span class="mr" eval_data='3' onclick="chooseEval(this)">Poor(1)</span>
                </p>
                <!-- 评价选择 -->

                <ul id="user_evaluate">
                    <li class="evaluate_li">
					 <span class="img">
						<img src="/img/acvator.jpg" alt="头像" />
					</span>
                        <span class="info">
						<h4>xxx</h4>
						<p>It's beautiful here.</p>
						<p class="time">2019-04-28</p>
						<div class="reply_info"> Reply：ye. </div>
					</span>
                    </li>
                </ul>

                <!-- 分页-START -->
                <div class="switch-tag-wrap " >
                    <!--<div class="js-switch next  fr" data-external="2" onclick="trunPage(this)">下一页</div>
                    <div class="js-switch prev fr" data-external="1" onclick="trunPage(this)">上一页</div>
                    <div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div> -->
                </div>
                <!-- 分页-END -->
            </div>


        </div>


    </div>
</section>

<div th:replace="footer :: footer"></div>

<script  th:inline="javascript">
    var list = [[${list}]];
    var user = [[${user}]]

    var foodList = [
        {id:0,text:'Hot noodles with sesame pastes...'},
        {id:1,text:'Spicy crayfish'},
        {id:2,text:'Spareribs and lotus root soup'},
    ]

    var transportList = [
        {id:0,text:'Subway'},
        {id:1,text:'Taxi'},
        {id:2,text:'Bus'},
    ]



    var generate_button = document.querySelector("#generate-button");
    generate_button.addEventListener("click",()=>{

        if (user && user.email) {
            var destination = $('#destination').val();
            var food = $('#food').val();
            var transport = $('#transport').val();
            var destinationObj = getText(list,destination);
            var foodObj = getText(foodList,food);
            var transportObj = getText(transportList,transport);
            var destinationText = $('#destinationText').text(destinationObj.name);
            var descriptionText = $('#descriptionText').text(destinationObj.description);
            var openingHourText=$('#openingHour').text(destinationObj.openingHours);
            var publicTransportText =  $('#publicTransport').text(destinationObj.publicTransport);
            var foodText = $('#foodText').text(foodObj.text);
            var transportText = $('#transportText').text(transportObj.text);
            $('#destinationBg').css('background-image','url('+destinationObj.imgPath+')')
        } else {
            iziToast.show(
                {
                    position: 'topCenter',
                    title: 'info',
                    message: 'please login!',
                    color: 'red'
                }
            )

        }




    })

    function getText(list,value) {
        return list.find((item)=>item.id==value);
    }




    //翻页操作
    function trunPage(obj){
        var page = $(obj).attr('data-external');
        var type = $('p.switch-head-line').find('span.chooseActive').attr('eval_data');	//获取评价类型
        getEvalHtml(page, type);	//元素追加
    }

    //选择操作
    function chooseEval(obj){
        // 点击高亮
        $(obj).parent().find('span.chooseActive').removeClass('chooseActive');
        $(obj).addClass('chooseActive');

        // 点击评价时内容切换
        getEvalHtml(1, $(obj).attr('eval_data'));
    }

    //为了模拟效果，直接写一些固定数据。
    function getEvalHtml(page, type){
        $('ul#user_evaluate').empty();	//元素清空
        $('div.switch-tag-wrap').empty();
        $('span#tempNotEva').empty();

        //处理评论 START
        var data = getDataByParam(page, type);
        var dataList = data.list;
        if(dataList!=''){	//数据拼接
            var liHtml = '';
            $.each(dataList, function(key, val){
                liHtml +='<li class="evaluate_li">'+
                    '<span class="img">'+
                    '<img src="' + val['photo'] + '" alt="" />'+
                    '</span>'+
                    '<span class="info">'+
                    '<h4>' + val['name'] + '</h4>'+
                    '<p>' + val['content'] + '</p>'+
                    '<p class="time">' + val['createTime'] + '</p>';
                if(val['reply']){
                    liHtml += '<div class="reply_info"> reply：' + val['reply'] + ' </div>';
                }
                liHtml += '</span></li>';
            });
            //console.log(liHtml);
            $('ul#user_evaluate').append(liHtml);	//评论数据追加
            //处理评论END

            //处理分页 START
            var pageHtml = '';
            if(data['totalPage']>1){
                if(data['page']!=data['totalPage']){//当前页不是最后一页?>
                    pageHtml +='<div class="js-switch next  fr" data-external="'+ (data['page']*1+1) +'" onclick="trunPage(this)">下一页</div>';
                }
                if(data['page']!=1){//当前页不是第一页?>
                    pageHtml +='<div class="js-switch prev fr" data-external="'+ (data['page']*1-1) +'" onclick="trunPage(this)">上一页</div>';
                }
                if(data['totalPage']!=1 && data['page']!=1){//总页数不是1页，并且当前页不是第一页?>
                    pageHtml +='<div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div>';
                }
                // $('div.switch-tag-wrap').append(pageHtml);	//页数追加
            }
            //处理分页END
        }else{
            $('ul#user_evaluate').text('No evaluation！！！');
        }
    }

    //根据页数，类型获取模拟数据
    function getDataByParam(page, type){
        var str = '';
        var photo = '/img/acvator.jpg';
        if(type==1){
            str = 	'{"page":"'+page+'",'+
                '"totalPage":3,'+
                '"list":['+
                '{"content":"hello","createTime":"2019-04-27 11:52","name":"go go !","photo":"'+photo+'","reply":""},'+
                '{"content":"is good","createTime":"2019-04-28 11:53","name":"lrfc","photo":"'+photo+'","reply":"thank"}'+
                ']}';
        }else if(type==2){
            str = 	'{"page":"'+page+'",'+
                '"totalPage":0,'+
                '"list":[]}';
        }else if(type==3){
            str = 	'{"page":"'+page+'",'+
                '"totalPage":1,'+
                '"list":['+
                '{"content":"The pen refill has faded","createTime":"2019-04-27 11:52","name":"Let\'s go","photo":"'+photo+'","reply":""}'+
                ']}';
        }
        return  JSON.parse(str);
    }




</script>


</body>
</html>
